<template>
  <div class="grid card">
        <div class="data-card card" v-for="item,index in datas" :key="index"  :style="{backgroundColor: colors[index]}">
            <div class="title">
                {{ item.title }}
            </div>
            <div class="flex flex-between">
                <el-icon :size="40">
                    <component :is="item.icon"></component>
                </el-icon>
                <span class="count">
                    <count-to :startVal="0" :endVal="item.count" :decimals="0" :duration="30000"></count-to>
                </span>
            </div>
        </div>
    </div>
    <div class="flex flex-between mt-20">
        <div class="card mr-20" style="width:70%">
            <EchartsLine :x-data="lineData.x" :y-data="lineData.y"></EchartsLine>
        </div>
          <div class="card" style="width:25%">
            <EchartsPie :data="pieData"></EchartsPie>
        </div>
    </div>
</template>

<script setup>
import { CountTo } from 'vue3-count-to';
import {ref,reactive} from 'vue'
import {getDatas,getWeekDatas,getContentDatas} from '@/api/dashboard'
import EchartsLine from '@/components/EchartsLine.vue'
import EchartsPie from '@/components/EchartsPie.vue'

const colors = ["#ec4786","#7858bd","#5dc0ef","#faab34"]

const datas = ref([]);

getDatas().then(res=>{
    datas.value = res.data
})

const lineData = reactive({})
getWeekDatas().then(res=>{
    if(res.code == 1){
        lineData.x = res.data.keys
        lineData.y = res.data.values
    }
})

const pieData = ref([])
getContentDatas().then(res=>{
    if(res.code == 1){
        pieData.value = res.data.values
    }
})

// const datas = [
//   {
//     title: "文章数量",
//     count: "3128",
//     icon: "Tickets",
//   },
//   {
//     title: "待审核数量",
//     count: "32",
//     icon: "Memo",
//   },
//   {
//     title: "管理员数量",
//     count: "5",
//     icon: "Histogram",
//   },
//   {
//     title: "分类数量",
//     count: "8",
//     icon: "Operation",
//   },
// ];
</script>

<style scoped  lang="scss">
.grid{
    grid-template-columns: repeat(4,1fr);
    gap:15px;

    .data-card{
        color:#fff;
    }

    .count{
        font-size:32px;
        font-weight: bold;
    }
}
</style>